<template>
  <div class="Zb">

  <div class="Zb-main">

  <!-- 中间主要内容部分 -->
  <div class="ZbBox">
    <div class="title">
      <ul  ref="title">
        <li style="font-weight: 700;">LOOK直播<span class="title-two">在这里，看见音乐</span></li>
        <li><span>更多</span> <span class="iconfont">&#xe65e;</span></li>
      </ul>
    </div>
    <div class="findcontent">
       <div class="recommMv">
        <slotZb :data="listData2"></slotZb>
    </div>
    </div>
  </div>
  </div>
  </div>
</template>

<script>

import Titles from '@/components/title.vue'
import slotZb from '@/components/slotZb.vue'
export default {
  name: 'HomeView',
  data() {
    return {
      dh:2,
      dhWidth:36,
      miao:'left 0.2s linear',
      NewMusicList:['全部','华语','欧美','韩国','日本'],
      NewMusic:'全部',
           isShow:1,
           NewMusicR:1,
           listData2:[
                
                {
                type:'LeftZB',
                id:'图片1',
                title:'不惧岁月|想在爱意随风起的时代和你慢慢来',
                index:'',
                "cover":require('../../public/homeImg/recommGd.jpg'),
                titleH1:'独家放送',
            },
            
            {   
                 type:'LeftZB',
                id:'图片2',
                index:1,
                 title:'热门歌正在持续更新',
                "cover":require('../../public/homeImg/recommGd1.jpg')
            },
            
            {
                 type:'LeftZB',
                id:'图片2',
                index:1,
                title:'热门歌正在持续更新',
                "cover":require('../../public/homeImg/recommGd1.jpg')
             },
            {
                 type:'LeftZB',
                id:'图片2',
                index:1,
                title:'热门歌正在持续更新',
                "cover":require('../../public/homeImg/recommGd1.jpg')
            },
                         {
                 type:'LeftZB',
                id:'图片2',
                index:1,
                title:'热门歌正在持续更新',
                "cover":require('../../public/homeImg/recommGd1.jpg')
             },
            {
                 type:'LeftZB',
                id:'图片2',
                index:1,
                title:'热门歌正在持续更新',
                "cover":require('../../public/homeImg/recommGd1.jpg')
            }
            
            
            ]
    }
  },

  components: {
    Titles,slotZb
  },
  created() {
    
  },
  mounted() {

  },
  methods: {
    
   
    
   
  }
}
</script>
<style lang="less" scoped>
@font-face {
  font-family: 'iconfont';
  src: url('../../public/font_home/iconfont.woff2?t=1657706050349') format('woff2'),
       url('../../public/font_home/iconfont.woff?t=1657706050349') format('woff'),
       url('../../public/font_home/iconfont.ttf?t=1657706050349') format('truetype');
}
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
    div,span,ul,li,img{
    font-size: 0;
}
.Zb-main{
     width: 100%;
//   display: flex;

.ZbBox{
//   max-width: 84%;
min-width: 82%;
  // border: solid #666666 1px;
//   margin: 25px 0 0 72px;
  position: relative;
  .title>ul::after{
    content: "";
    display: block;
    clear: both;
    visibility:hidden;
    height: 0;
  }
   .title>ul{
    
    font-weight: 200;
    // li>a{
    //    .font23();
    //     margin-left: 35px;
    // }
    li{
       .font21px();
    }
    li:first-child{
       float: left;
       span{
        font-size: 16px;
        font-weight: 500;
        color: #676767;
        margin-left: 10px;
       }
    }
      li:last-child{
        float: right;
        margin-right: 19px;
        cursor: pointer;
        span{
          font-size: 18px;
          
        }
    }
  
  }
  .findcontent{
    margin-top: 22px;
    // border: 1px solid palevioletred;
    .title-NewMusic{
   margin-bottom: 25px;
  
    .NewMusic{
        font-weight: 800;
    }
    ul{
        display: flex;
        position: relative;
        div{
             display: flex;
             position: absolute !important;
            right: 0px !important;
        li{
                    margin-right: 30px;
               
                    span{
                    font-size: 18px;
                    color: #676767;
                    cursor: pointer;
                }
                }
        }
      
        .right-title{
           
            
             li:first-child{
                margin-left: 4px;
                
                border:solid 1px  #373737;
                span{
                    color: #373737;
                }
            }
            li{
                  padding: 4px 16px;
             
            margin-right: 15px;
            border-radius: 17px;
            span{
                color: white;
                font-size: 16px;
            }
           
            span:nth-child(2){
                margin-left: 4px;
              
            }
            }
        }
     
        
    }
}
  }
}
   }
 
.iconStyleRIght{
  font-size: .119792rem /* 23/192 */;
  color: #313131;
 
}
.iconStyleLeft{
  font-size: .098958rem /* 19/192 */;
  color: #313131;
}
.font23{
  font-size: .119792rem /* 23/192 */;
}
.font23Px{
   font-size:23px;
}
.font23(){
  font-size: .119792rem /* 23/192 */;
}
.font21px(){
  font-size:21px;
}
.marginRight{
  margin-right:.072917rem /* 14/192 */;
}
.floatRight{
  float: right;
}
.jia{
  color: #666666;
  margin-right: .104167rem /* 20/192 */;
  font-weight: inherit;
}

</style>